<template>
  <!-- 首页列表分类 -->
        <div class="classify-total">
            <div class="list-classify">
                <!-- 服务 -->
                 <router-link class="list-classify-item" to="/service/index">
                    <p class="list-item-top list-p-08">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-bangzhu-copy"></use>
                        </svg>
                    </p>
                    <p class="list-item-bottom">服务</p>
                </router-link>
                        <router-link class="list-classify-item" to="/bleachery">
                    <p class="list-item-top list-p-10">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tupian"></use>
                        </svg>
                    </p>
                    <p class="list-item-bottom">晒场</p>
                </router-link>
                 <!-- 招聘 -->
                <router-link class="list-classify-item" to="/jobs">
                    <p class="list-item-top list-p-03">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yingpinzhiwei-copy"></use>
                        </svg>
                    </p>
                    <p class="list-item-bottom">招聘</p>
                </router-link>
                
                <!-- 筑功者 -->
                <router-link class="list-classify-item" to="/zgz">
                    <p class="list-item-top list-p-01">
                        <img src="~@/assets/zgz.png"/>
                    </p>
                    <p class="list-item-bottom">筑功者</p>
                </router-link>
                <!-- 工程项目 -->
                <router-link class="list-classify-item" to="/projects">
                    <p class="list-item-top  list-p-02">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fl-gongcheng"></use>
                        </svg>   
                    </p>
                    <p class="list-item-bottom">工程项目</p>
                </router-link>
        
               
                
                <!-- <router-link class="list-classify-item" to="/user/resume">
                    <p class="list-item-top list-p-04">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xiangmuguanli"></use>
                        </svg>
                    </p>
                    <p class="list-item-bottom">项目管理</p>
                </router-link> -->
                <!-- <router-link class="list-classify-item" to="/user/resume">
                    <p class="list-item-top list-p-05">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gonglve-copy"></use>
                        </svg>
                    </p>
                    <p class="list-item-bottom">攻略</p>
                </router-link> -->
            </div>
            <!-- <div class="list-classify">
                <router-link class="list-classify-item" to="/user/resume">
                    <p class="list-item-top list-p-06">
                    <img src="~@/assets/jineng.png"/>
                    </p>
                    <p class="list-item-bottom">技能</p>
                </router-link>
                <router-link class="list-classify-item" to="/news">
                    <p class="list-item-top list-p-07">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xinwenzixun-copy"></use>
                        </svg>
                    </p>
                    <p class="list-item-bottom">新闻资讯</p>
                </router-link>
               
                <router-link class="list-classify-item" to="/user">
                    <p class="list-item-top list-p-09">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-geren-copy"></use>
                        </svg>
                    </p>
                    <p class="list-item-bottom">个人中心</p>
                </router-link>
            
            </div> -->
        </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
/* 列表分类 */
.classify-total {
  padding-bottom: 14px;
  padding-top: 13px;
}
.list-classify {
  width: 100%;
  display: flex;
  align-items: center;
}
.list-classify-item {
  flex: 0 0 20%;
  text-align: center;
}
.list-classify-item .icon {
  font-size: 33px;
  color: #ffffff;
  line-height: 60px;
  height: 60px;
}
.list-p-01 {
  background: #ff7526;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 29px;
    height: 32px;
    display: block;
  }
}
.list-p-02 {
  background: #ffc540;
  .icon{
      font-size: 38px;
  }
}
.list-p-03 {
  background: #30bcff;
  .icon{
      font-size: 40px;
  }
}
.list-p-04 {
  background: #24dcb3;
}
.list-p-05 {
  background: #849cff;
}
.list-p-06 {
  background: #ffc53f;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 31.3px;
    height: 30.3px;
    display: block;
  }
}
.list-p-07 {
  background: #ffa729;
  .icon{
      font-size: 30px;
  }
}
.list-p-08 {
  background: #10d184;
}
.list-p-09 {
  background: #30bcff;
  .icon{
      margin-left:3px;
  }
}
.list-p-10 {
  background: #ff7568;
}

.list-item-top {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}
.list-item-bottom {
  font-size: 14px;
  color: #282828;
  margin-bottom: 12px;
}

</style>
